<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<base href="http://1stjs.googlecode.com/svn/trunk/fw4/" />
<title>Untitled Document</title>
<script type="text/javascript" src="1st.js"></script>
</head>

<body>
<h3>淘宝iPhone图片展示示例</h3>
<style type="text/css">
*{margin:0; padding:0;}
body{font-size:12px;}
#sbox02{position:relative;padding:6px;width:1000px;height:500px;border:1px solid #ccc;line-height:2;}
#sbox02 #bar{position:absolute;top:0px;z-index:2;overflow:hidden;width:390px;height:28px; background-color:#768; color:#fff;}
#sbxo02 #bar b{color:#ff0000;}
#sbox02 .panel{position:relative;height:400px;overflow:hidden;}
#sbox02 .panel div{width:1000px; text-align:center;}
#sbox02 .panel img{border:0;width:600px;height:400px;}
#sbox02 .tab{height:62px;}
#sbox02 .tab span{cursor:pointer;float:left;margin:4px 2px;padding:1px;border:1px solid #ccc;}
#sbox02 .tab span.focus{border-color:green;}
#sbox02 .tab img{display:block;width:35px;height:35px;}
</style>
<div id="sbox02">
	<div id="bar"></div>
	<div class="panel">
		<div class="wrap">
			<div><a href="javascript:void(0);"><img src="data/img/slides/iphone/01.jpg"/></a></div>
			<div><a href="javascript:void(0);"><img src="data/img/slides/iphone/02.jpg"/></a></div>
			<div><a href="javascript:void(0);"><img src="data/img/slides/iphone/03.jpg"/></a></div>
			<div><a href="javascript:void(0);"><img src="data/img/slides/iphone/04.jpg"/></a></div>
			<div><a href="javascript:void(0);"><img src="data/img/slides/iphone/05.jpg"/></a></div>
			<div><a href="javascript:void(0);"><img src="data/img/slides/iphone/06.jpg"/></a></div>
			<div><a href="javascript:void(0);"><img src="data/img/slides/iphone/07.jpg"/></a></div>
			<div><a href="javascript:void(0);"><img src="data/img/slides/iphone/08.jpg"/></a></div>
			<div><a href="javascript:void(0);"><img src="data/img/slides/iphone/09.jpg"/></a></div>
			<div><a href="javascript:void(0);"><img src="data/img/slides/iphone/10.jpg"/></a></div>
			<div><a href="javascript:void(0);"><img src="data/img/slides/iphone/11.jpg"/></a></div>
			<div><a href="javascript:void(0);"><img src="data/img/slides/iphone/12.jpg"/></a></div>
			<div><a href="javascript:void(0);"><img src="data/img/slides/iphone/13.jpg"/></a></div>
			<div><a href="javascript:void(0);"><img src="data/img/slides/iphone/14.jpg"/></a></div>
			<div><a href="javascript:void(0);"><img src="data/img/slides/iphone/15.jpg"/></a></div>
			<div><a href="javascript:void(0);"><img src="data/img/slides/iphone/16.jpg"/></a></div>
			<div><a href="javascript:void(0);"><img src="data/img/slides/iphone/17.jpg"/></a></div>
			<div><a href="javascript:void(0);"><img src="data/img/slides/iphone/18.jpg"/></a></div>
			<div><a href="javascript:void(0);"><img src="data/img/slides/iphone/19.jpg"/></a></div>
			<div><a href="javascript:void(0);"><img src="data/img/slides/iphone/20.jpg"/></a></div>
			<div><a href="javascript:void(0);"><img src="data/img/slides/iphone/21.jpg"/></a></div>
			<div><a href="javascript:void(0);"><img src="data/img/slides/iphone/22.jpg"/></a></div>
			<div><a href="javascript:void(0);"><img src="data/img/slides/iphone/23.jpg"/></a></div>				
		</div>
	</div>
	<div class="tab">
		<span class="focus"><img src="data/img/slides/iphone/01.jpg"/></span>
		<span><img src="data/img/slides/iphone/02.jpg"/></span>
		<span><img src="data/img/slides/iphone/03.jpg"/></span>
		<span><img src="data/img/slides/iphone/04.jpg"/></span>
		<span><img src="data/img/slides/iphone/05.jpg"/></span>
		<span><img src="data/img/slides/iphone/06.jpg"/></span>
		<span><img src="data/img/slides/iphone/07.jpg"/></span>
		<span><img src="data/img/slides/iphone/08.jpg"/></span>
		<span><img src="data/img/slides/iphone/09.jpg"/></span>
		<span><img src="data/img/slides/iphone/10.jpg"/></span>		
		<span><img src="data/img/slides/iphone/11.jpg"/></span>
		<span><img src="data/img/slides/iphone/12.jpg"/></span>
		<span><img src="data/img/slides/iphone/13.jpg"/></span>
		<span><img src="data/img/slides/iphone/14.jpg"/></span>
		<span><img src="data/img/slides/iphone/15.jpg"/></span>
		<span><img src="data/img/slides/iphone/16.jpg"/></span>
		<span><img src="data/img/slides/iphone/17.jpg"/></span>
		<span><img src="data/img/slides/iphone/18.jpg"/></span>
		<span><img src="data/img/slides/iphone/19.jpg"/></span>
		<span><img src="data/img/slides/iphone/20.jpg"/></span>			
		<span><img src="data/img/slides/iphone/21.jpg"/></span>
		<span><img src="data/img/slides/iphone/22.jpg"/></span>
		<span><img src="data/img/slides/iphone/23.jpg"/></span>		
	</div>
</div>

<script type="text/javascript">
var data = [
	{price:41.40, place:"金华"},
	{price:25.00, place:"深圳"},
	{price:15.00, place:"深圳"},
	{price:12.00, place:"深圳"},
	{price:85.00, place:"上海"},
	{price:28.50, place:"上海"},
	{price:45.00, place:"上海"},
	{price:25.00, place:"深圳"},
	{price:68.00, place:"上海"},
	{price:58.00, place:"上海"},
	{price:18.00, place:"深圳"},
	{price:35.00, place:"深圳"},
	{price:5000.00, place:"深圳"},
	{price:1180.00, place:"泉州"},
	{price:10.00, place:"深圳"},
	{price:88.00, place:"上海"},
	{price:15.00, place:"深圳"},
	{price:18.00, place:"上海"},
	{price:8.90, place:"杭州"},
	{price:78.00, place:"上海"},
	{price:50.00, place:"北京"},
	{price:158.00, place:"北京"},
	{price:57.00, place:"广州"}
];

F("sbox02").slides({
	panel: "scrollLeft",
	autoplay: 2000,
	init : function(me){
		me.bar = F("bar");
		me.onchange(me);
	},
	onchange: function(me){
		me.bar.html('售价：<b>$price</b> 所在地：<b>$place</b>'.mix(data[me.nowIndex]));
	},
	loop:1
});
</script>
</body>
</html>
